<%@ page language="java" pageEncoding="UTF-8" %>
<%@ include file="/common/taglibs.jsp" %>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <%@ include file="/common/res.jsp" %>
    <%@ include file="/common/res-select2.jsp" %>
    <%@ include file="/common/res-datatable.jsp" %>
    <title>洗车工管理</title>
</head>
<body>
<%@ include file="/common/head.jsp" %>
<div class="wrap-container">
    <div class="row">
        <div class="col-md-3 col-lg-2">
            <%@ include file="/common/left.jsp" %>
        </div>
        <div class="col-md-9 col-lg-10">
            <div class="cms-common-content">
                <h3>洗车工管理</h3>
                <div class="bltitle-content">
                    <form id="searchForm">
                        <table class="cms-change-table" cellpadding="0" cellspacing="0">
                            <tbody>
                            <tr>
                                <td class="search-label">手机号码：</td>
                                <td class="search-input">
                                    <input type="text" name="search_phoneNo" class="form-control" placeholder="输入手机号码">
                                </td>
                                <td class="search-label">姓名：</td>
                                <td class="search-input">
                                    <input type="text" name="search_userName" class="form-control" placeholder="输入姓名">
                                </td>
                            </tr>
                            <tr>
                                <td class="search-label">注册时间：</td>
                                <td class="search-input">
                                    <input type="text" style="width: 120px;" name="search_startTime" id="search_startTime" class="form-control Wdate" placeholder="开始时间" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',maxDate:'#F{$dp.$D(\'search_endTime\')}'})">
                                    <input type="text" style="width: 120px;" name="search_endTime"  id="search_endTime" class="form-control Wdate" placeholder="结束时间" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',minDate:'#F{$dp.$D(\'search_startTime\')}',maxDate:'2020-10-01'})">
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <p class="search-actionBtn clearfix">
                            <button type="submit" class="btn btn-primary">查询</button>
                            <button type="reset" class="btn btn-default">重置</button>
                        </p>
                    </form>
                </div> <!--/.bltitle-content-->
            </div><!--/.cms-common-content-->
            <div class="clearfix">
                <button type="button" class="btn btn-primary" id="createWasher">添加洗车工</button>
                <table id="user-datatables"
                       class="table table-striped table-bordered table-hover" cellspacing="0" width="100%"></table>
            </div>
        </div>
        <!--/.col-md-12-->
    </div>
    <!--/.row-->
</div>


<script>
    $(function () {
        var rowActionTpl = $('#tableActionTpl').html(); //获取模板引擎
        var rowActionTpl0 = $('#tableActionTpl0').html(); //获取模板引擎
        
        //jquery datatables
        window.oTableMem  = $('#user-datatables').DataTable({
            'processing': true,
            'serverSide': true,
            'ajax': {
                "url": P.ctx + '/op/washer/datatables.json',
                "type": "POST",
                'data': function (d) {
                    return $.extend({}, d, buildParam());
                }
            },
            'columns': [
                {'data': 'id', 'title': 'uid', orderable: true},
                {'data': 'createTime', 'title': '注册时间', orderable: true},
                {'data': 'userName', 'title': '姓名', orderable: true},
                {'data': 'sex', 'title': '性别', orderable: true,
                    render: function(data, type, row){
                        if(data == '1'){
                            return P.render("男");
                        }else if(data == '2'){
                            return P.render("女");
                        }
                    }
                },
                {'data': 'phoneNo', 'title': '手机号码', orderable: true},
                {'data': 'idNumber', 'title': '身份证号', orderable: true},
                {'data': 'isValid', 'title': '状态', orderable: true,
                	render: function(data, type, row){
                		if(data == '1'){
                			return P.render("可用");
                		}else if(data == '0'){
                			return P.render("停用");
                		}
                	}
                },
                {'data': 'id', 'title': '操作', width: '10%', orderable: false, class: 'text-left',
                    render: function (data, type, row) {
                        if( row.isValid == '1'){ // 1 可用 0 停用
                        	return P.render(rowActionTpl, row); // 拉黑
                        }else{
                        	return P.render(rowActionTpl0, row); // 洗白
                        }
                    }
                }
            ],
            'columnDefs': [
                {'defaultContent': '', targets: '_all'}
            ],
            'order': [[0, 'desc']],
            dom: '<"clearfix">rpitip',
            'paginate': true,
            language: {
                sSearch: '<span>搜索:</span> ',
                info: '显示_START_到_END_条,共_TOTAL_条记录',
                infoEmpty: '显示0到0条,共0条记录',
                lengthMenu: '每页_MENU_条',
                processing: '正在处理...',
                emptyTable: '<div class="alert no-margin" style="font-size:12px;padding:5px;">无可用数据</div>',
                zeroRecords: '<div class="alert no-margin" style="font-size:12px;padding:5px;">无记录数据</div>',
                search: '输入搜索',
                paginate: {'first': '首页', 'previous': ' 上一页 ', 'next': ' 下一页 ', 'last': ' 尾页 '}
            }
        });
        //搜索表单
        $('#searchForm').on('submit',function(e){
            e.preventDefault();
            window.refreshParentDataGrid(true);
        });

        //添加
        $('#createWasher').on('click',function(e){
            e.preventDefault();
            openDialog({}) ;
        });

        //行：更新按钮
        $('#user-datatables').on('click', '[name="joinBlack"]', function (e) {
            e.preventDefault();
            var jsonObj = $(this).data();
            jsonObj.userName = jsonObj.user_name;
            if(jsonObj.is_valid == '1'){
            	jsonObj.isValid = '0';
	            if (window.confirm('确认拉黑？')) {
	                $.ajax({
	                    url: P.ctx + '/op/washer/update',
	                    type: 'post',
	                    data: jsonObj,
	                    success: function (resp) {
	                        P.messager({content:resp.msg,type:resp.success==true?'success':'error'}) ;
	                        refreshParentDataGrid();
	                    }
	                });
	            }
            }else{
            	if(window.confirm('确认洗白？')) {
            		jsonObj.isValid = '1';
	                $.ajax({
	                    url: P.ctx + '/op/washer/update',
	                    type: 'post',
	                    data: jsonObj,
	                    success: function (resp) {
	                        P.messager({content:resp.msg,type:resp.success==true?'success':'error'}) ;
	                        refreshParentDataGrid();
	                    }
	                });
            	}
            }
        });

        function openDialog(param) {
            var _params = $.extend({}, param);
            bootbox.dialog({
                message: "&nbsp;",
                title: "编辑用户",
                buttons: {
                    submit: {
                        label: "保存",
                        className: "btn-primary",
                        callback: function () {
                            $('#bootbox-body').find('form[name="inputForm"]').eq(0).submit();
                            return false;
                        }
                    },
                    close: {
                        label: "关闭",
                        className: "btn-default",
                        callback: function () {
                            bootbox.hideAll();
                            return false;
                        }
                    }
                }
            });
            $('#bootbox-body').load2('${ctx}/op/washer/input', _params)
        }



        //全局函数::刷新表格
        window.refreshParentDataGrid = function (resetPaging) {
        	oTableMem.ajax.reload( null , resetPaging == true)
        }


        function buildParam() {
            return $.extend($('#searchForm').serializeObject(), {})
        }

    });//Dom ready
</script>

<!--表格操作列模板定义-->
<script id="tableActionTpl" type="text/x-mustache">
    <div class="row-actions">
       <span>
            <a name="edit"  class="" data-id="{{id}}" data-name="{{name}}" href="washer/detail?id={{id}}" title="编辑">
                查看
            </a>
        </span>|
        <span>
            <a name="joinBlack" class="red " data-id="{{id}}" data-is_valid="{{isValid}}" data-user_name="{{userName}}"  href="javascript:;" title="拉黑">
               拉黑
            </a>
        </span>
    </div>
</script>

<script id="tableActionTpl0" type="text/x-mustache">
    <div class="row-actions">
        <span>
            <a name="edit"  class="" data-id="{{id}}" data-name="{{name}}" href="washer/detail?id={{id}}" title="编辑">
                查看
            </a>
        </span>|
        <span>
            <a name="joinBlack" class="red " data-id="{{id}}" data-is_valid="{{isValid}}" data-user_name="{{userName}}" href="javascript:;" title="洗白">
              洗白
            </a>
        </span>
    </div>

</script>
</body>
</html>